import React, { useState } from 'react';
import classNames from 'classnames';
import { MenuContext } from './menu';
import { MenuItemProps } from './menuItem';
import { Icon } from '../Icon';
import { faCaretDown } from '@fortawesome/free-solid-svg-icons';

/**
 * SubMenu 组件属性接口
 */
export interface SubMenuProps {
  /** 子菜单的唯一标识索引 */
  index?: string;
  /** 子菜单标题 */
  title: string;
  /** 自定义 CSS 类名 */
  className?: string;
  /** 子菜单项内容 */
  children?: React.ReactNode;
}

/**
 * SubMenu 组件 - 子菜单容器
 * 支持水平模式的悬停展开和垂直模式的点击展开
 */
export const SubMenu: React.FC<SubMenuProps> = (props) => {
  const { index, title, className, children } = props;
  // 从上下文中获取菜单配置
  const context = React.useContext(MenuContext);
  
  // 子菜单展开状态，支持默认展开配置
  const [menuOpen, setMenuOpen] = useState(
    context.defaultOpenSubMenus?.includes(index!) || false
  );

  // 动态生成 CSS 类名
  const classes = classNames('submenu-item', className, {
    'is-active': context.activeIndex === index, // 激活状态
    'is-opened': menuOpen, // 展开状态
  });

  /**
   * 处理垂直模式下的点击事件
   * @param e - 鼠标事件对象
   */
  const handleClick = (e: React.MouseEvent) => {
    e.preventDefault();
    setMenuOpen(!menuOpen); // 切换展开状态
  };

  // 防抖定时器，用于水平模式的悬停延迟
  let timer: NodeJS.Timeout;
  
  /**
   * 处理水平模式下的鼠标悬停事件
   * @param e - 鼠标事件对象
   * @param toggle - 是否展开子菜单
   */
  const handleMouse = (e: React.MouseEvent, toggle: boolean) => {
    clearTimeout(timer); // 清除之前的定时器
    e.preventDefault();
    // 设置防抖延迟，避免快速鼠标移动导致的闪烁
    timer = setTimeout(() => {
      setMenuOpen(toggle);
    }, 300);
  };

  // 垂直模式：点击展开
  const clickEvents = context.mode === 'vertical' ? {
    onClick: handleClick,
  } : {};

  // 水平模式：悬停展开
  const hoverEvents = context.mode !== 'vertical' ? {
    onMouseEnter: (e: React.MouseEvent) => handleMouse(e, true),  // 鼠标进入
    onMouseLeave: (e: React.MouseEvent) => handleMouse(e, false), // 鼠标离开
  } : {};

  /**
   * 渲染子菜单项
   */
  const renderChildren = () => {
    const subMenuClasses = classNames('submenu', {
      'menu-opened': menuOpen, // 展开状态类名
    });

    return (
      <ul className={subMenuClasses}>
        {React.Children.map(children, (child, i) => {
          const childElement = child as React.FunctionComponentElement<MenuItemProps>;
          // 只允许 MenuItem 作为子菜单项
          if (childElement.type.displayName === 'MenuItem') {
            // 为子菜单项分配复合索引（父索引-子索引）
            return React.cloneElement(childElement, {
              index: `${index}-${i}`,
            });
          } else {
            console.error('Warning: SubMenu has a child which is not a MenuItem');
          }
        })}
      </ul>
    );
  };

  return (
    <li key={index} className={classes} {...hoverEvents}>
      {/* 子菜单标题，绑定点击事件（垂直模式） */}
      <div className="submenu-title" {...clickEvents}>
        {title}
        {/* 箭头图标，水平菜单模式下显示 */}
        {context.mode === 'horizontal' && (
          <Icon 
            icon={faCaretDown} 
            size="sm" 
            className={`submenu-arrow ${menuOpen ? 'submenu-arrow-rotated' : ''}`}
          />
        )}
      </div>
      {/* 子菜单内容 */}
      {renderChildren()}
    </li>
  );
};

SubMenu.displayName = 'SubMenu';